<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box {
				width: 300px;
				height: 500px;
				border: 4px solid green;
				/* step2:绑定动画 
				animation:动画名称 持续时间 次数;
				infinite:无限的
				linear:匀速
				*/
				animation: sf 2s infinite linear;
			}

			/* step1:创建关键帧 */
				/*  @keyframes sf{
			 from{   
					开始帧
					width: 300px;
					height: 300px;
					background-color: pink;
					transform: rotate(0deg);
				}
				to {
					 结束帧
					width: 1200px;
					height: 500px;
					background-color: aqua;
					transform: translate(200px, 300px) rotate(180deg);
				} */
				@keyframes sf{
				0%,30%{  /*百分比:时间节点 */
					width: 300px;
					height: 300px;
					background-color: pink;
					transform: rotate(0deg);
				}
				40%,70%{  /* 保持某种状态一段时间 */
					width: 1200px;
					height: 500px;
					background-color: aqua;
					transform: translate(200px, 300px) rotate(180deg);
				}
				80%,100%{
					width: 400px;
					height: 400px;
					background-color: burlywood;
					transform: rotate(240deg);
					border-radius: 200px;
				}
				/* 100%{
					background-color: gold;
				} */
			}
			/* @-ms-keyframes name{
				from{}
				to{}
			}
			@-webkit-keyframes name{
				from{}
				to{}
			}
			@-moz-keyframes name{
				from{}
				to{}
			} */
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
